<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>随堂测试</title>
		<include file="./Public/weui2.0/__head.html"/>
		<link href="__PUBLIC__/css/exercise.css" type="text/css" rel="stylesheet"/>
		<script src="__PUBLIC__/font/iconfont.js"></script>
		<style type="text/css">
			/*progress*/
			.placeholder {width:30px; height:30px; border-radius:30px; border:1px solid #4bc2ff; line-height: 30px; text-align: center; margin: auto;}
			.weui-flex { padding-top: 5px;height: 40px;}
			.helf-title {line-height: 2.2rem; font-size: 14px;text-align: center; margin: 0 20px;}
			.title-progerss {border-bottom:1px  solid #ddd; padding-bottom: 5px;}

		</style>
	</head>
	<body>
		<div class="content">
			<span class="c-title">{$record.name}</span>
				<div class="title-progerss">
				<ul>
					<li class="open-popup" data-target="#half" style="width: 74%; text-align: left;">
						<span><svg class="icon_progress" aria-hidden="true"><use xmlns:xlink="" xlink:href="#icon-jindu"></use></svg>{$record.count|default="24"}/{$record.sum|default='112'}
						</span>
						<span style="margin-left: 5px;"><svg class="icon_progress" aria-hidden="true"><use xmlns:xlink="" xlink:href="#icon-zhengque1"></use></svg>{$record.rig_cot|default='23'}</span>
						<span style="margin-left: 5px;"><svg class="icon_progress" aria-hidden="true"><use xmlns:xlink="" xlink:href="#icon-cuowu"></use></svg>{$record.wrg_cot|default='123'}</span>
					</li>
					<li id ="collect" style="width: 24%;text-align: right; ">
						<span ><svg class="icon_progress" aria-hidden="true"><use xmlns:xlink="" xlink:href="#icon-shoucang1"></use></svg><span id="collect_tip">收藏</span></span>
					</li>
					
				</ul>
			</div>

			<div class="c-pic"><span class="weui-badge">{$quesItem.type}</span><span class="weui-badge" style="margin-left: 5px;">{$quesItem.chapter}</span>{$quesItem.contents}</div>
			<!-- <img class="c-pic" src="__PUBLIC__/images/pic.jpg"> -->
			<div class="c-table">

				<!-- option exit -->
				<if condition="$quesItem.option_a neq ''">
					<a href="javascript:;">
						<div class="option-area" id="option-a">
						    <span><svg class="icon" aria-hidden="true"><use xmlns:xlink="" xlink:href="#icon-option-a"></use></svg></span>
						    <lable class="option-contents">{$quesItem.option_a}</lable>
						</div>
					</a>
				</if>

				<if condition="$quesItem.option_b neq ''">
					<a href="javascript:;">
						<div class="option-area" id="option-b">
						    <span><svg class="icon" aria-hidden="true"><use xmlns:xlink="" xlink:href="#icon-option-b"></use></svg></span>
						    <lable class="option-contents">{$quesItem.option_b}</lable>
						</div>
					</a>
				</if>

				<if condition="$quesItem.option_c neq ''">
					<a href="javascript:;">
						<div class="option-area" id="option-c">
						    <span><svg class="icon" aria-hidden="true"><use xmlns:xlink="" xlink:href="#icon-option-c"></use></svg></span>
						    <lable class="option-contents">{$quesItem.option_c}</lable>
						</div>
					</a>
				</if>

				<if condition="$quesItem.option_d neq ''">
					<a href="javascript:;">
						<div class="option-area" id="option-d">
						    <span><svg class="icon" aria-hidden="true"><use xmlns:xlink="" xlink:href="#icon-option-d"></use></svg></span>
						    <lable class="option-contents">{$quesItem.option_d}</lable>
						</div>
					</a>
				</if>
				
			</div>
			<a class="c-button" href="{:U('Exercise/exercise_chap', array('chapid'=>session('chapid'), 'typeid'=>session('typeid')))}">下一题</a>
		</div>

		<div class='demos-content-padded'></div>

		<div id="half" class='weui-popup__container popup-bottom'>
		    <div class="weui-popup__overlay"></div>
		    <div class="weui-popup__modal">
		        <div class="toolbar">
			        <div class="toolbar-inner" >
				       <div class="helf-title">这是标题</div>				       
				    </div>
		            
		        </div>
		        <div class="modal-content">
		            <div class="weui-flex">
				      <div class="weui-flex__item"><div class="placeholder">1</div></div>
				      <div class="weui-flex__item"><div class="placeholder">2</div></div>
				      <div class="weui-flex__item"><div class="placeholder">3</div></div>
				      <div class="weui-flex__item"><div class="placeholder">4</div></div>
				      <div class="weui-flex__item"><div class="placeholder">5</div></div>
				      <div class="weui-flex__item"><div class="placeholder">6</div></div>
				      <div class="weui-flex__item"><div class="placeholder">7</div></div>
				    </div>

				

				    <div class="weui-flex">
				      <div class="weui-flex__item"><div class="placeholder">8</div></div>
				      <div class="weui-flex__item"><div class="placeholder">222</div></div>
				      <div class="weui-flex__item"><div class="placeholder">33</div></div>
				      <div class="weui-flex__item"><div class="placeholder">4</div></div>
				      <div class="weui-flex__item"><div class="placeholder">5</div></div>
				      <div class="weui-flex__item"><div class="placeholder">6</div></div>
				      <div class="weui-flex__item"><div class="placeholder">7</div></div>
				    </div>

				    <div class="weui-flex">
				      <div class="weui-flex__item"><div class="placeholder">9</div></div>
				      <div class="weui-flex__item"><div class="placeholder">222</div></div>
				      <div class="weui-flex__item"><div class="placeholder">33</div></div>
				      <div class="weui-flex__item"><div class="placeholder">4</div></div>
				      <div class="weui-flex__item"><div class="placeholder">5</div></div>
				      <div class="weui-flex__item"><div class="placeholder">6</div></div>
				      <div class="weui-flex__item"><div class="placeholder">7</div></div>
				    </div>

				    <div class="weui-flex">
				      <div class="weui-flex__item"><div class="placeholder">10</div></div>
				      <div class="weui-flex__item"><div class="placeholder">222</div></div>
				      <div class="weui-flex__item"><div class="placeholder">33</div></div>
				      <div class="weui-flex__item"><div class="placeholder">4</div></div>
				      <div class="weui-flex__item"><div class="placeholder">5</div></div>
				      <div class="weui-flex__item"><div class="placeholder">6</div></div>
				      <div class="weui-flex__item"><div class="placeholder">7</div></div>
				    </div>

				    <div class="weui-flex">
				      <div class="weui-flex__item"><div class="placeholder">11</div></div>
				      <div class="weui-flex__item"><div class="placeholder">222</div></div>
				      <div class="weui-flex__item"><div class="placeholder">33</div></div>
				      <div class="weui-flex__item"><div class="placeholder">4</div></div>
				      <div class="weui-flex__item"><div class="placeholder">5</div></div>
				      <div class="weui-flex__item"><div class="placeholder">6</div></div>
				      <div class="weui-flex__item"><div class="placeholder">7</div></div>
				    </div>

				    <div class="weui-flex">
				      <div class="weui-flex__item"><div class="placeholder">12</div></div>
				      <div class="weui-flex__item"><div class="placeholder">222</div></div>
				      <div class="weui-flex__item"><div class="placeholder">33</div></div>
				      <div class="weui-flex__item"><div class="placeholder">4</div></div>
				      <div class="weui-flex__item"><div class="placeholder">5</div></div>
				      <div class="weui-flex__item"><div class="placeholder">6</div></div>
				      <div class="weui-flex__item"><div class="placeholder">7</div></div>
				    </div>

				    <div class="weui-flex">
				      <div class="weui-flex__item"><div class="placeholder">13</div></div>
				      <div class="weui-flex__item"><div class="placeholder">222</div></div>
				      <div class="weui-flex__item"><div class="placeholder">33</div></div>
				      <div class="weui-flex__item"><div class="placeholder">4</div></div>
				      <div class="weui-flex__item"><div class="placeholder">5</div></div>
				      <div class="weui-flex__item"><div class="placeholder">6</div></div>
				      <div class="weui-flex__item"><div class="placeholder">7</div></div>
				    </div>

		        </div>
		    </div>
		</div>
    

		
	</body>
</html>

<include file="./Public/weui2.0/__foot.html"/>
<script type="text/javascript">
	// 获取页面加载的时间
    var start_time = new Date();  

    // 定义收藏点击的次数
    var click_select = 0;


    // 点击选项后上传答案
	$('.option-area').one('click',function(){
		// 选择了之后正确
		var use       = $(this).find('use')[0];
		var icon_attr = use.getAttribute('xlink:href');
		var option    = icon_attr.substring(13).toUpperCase(); //选项
		var now       = new Date();
		var time      = Math.ceil((now.getTime() - start_time.getTime()) / 1000);
		

		var data = {
			'option': option,
			'time'  : time
		}

		var url = "{:U('Exercise/submit')}";
        $.post(url, data, function(res){
          	if(res == option) {
          		use.setAttribute('xlink:href', '#icon-option-right');
          	} else {
          		use.setAttribute('xlink:href', '#icon-option-wrong');
				$('#option-'+res.toLowerCase()).find('use')[0].setAttribute('xlink:href', '#icon-option-right');
          	}
        });

		$('.c-table a').removeAttr('href'); //取消a：herf 取消点击样式
		$('.option-area').unbind(); //移除被选元素的事件处理程序
	})


	// 点击后monup
	$(document).on("click", ".weui-popup-modal", function() {
        console.log("open popup");
    }).on("close", ".weui-popup-modal", function() {
        console.log("close popup");
    });

    // 点击选项后上传答案
    $('#collect').click(function (){
		// 用点击基数次数 偶数次数来判定是否选择
		click_select ++;
		var selec_icon = $(this).find('use')[0];


		if (click_select % 2 == 1) {
			// 收藏
			selec_icon.setAttribute('xlink:href', '#icon-shoucang11');
			$('#collect_tip').html('已收藏');
		} else {
			// 取消收藏
			selec_icon.setAttribute('xlink:href', '#icon-shoucang1');
			$('#collect_tip').html('收藏');
		}
	});




</script>
